<template>
    <div style="padding: 20px;">
      <div class="headerBoxList">
        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M39.3 6H8.7C7.20883 6 6 7.20883 6 8.7V39.3C6 40.7912 7.20883 42 8.7 42H39.3C40.7912 42 42 40.7912 42 39.3V8.7C42 7.20883 40.7912 6 39.3 6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M32 6V24H15V6H32Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M26 13V17" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M10.9971 6H35.9986" stroke="#333" stroke-width="4" stroke-linecap="round"/></svg>
        <span style="margin-left: 10px">内存信息 <span style="font-size: 15px;" v-if="total!==0">({{ total }}行)</span></span>
        </div>
        <div class="content">
      
          <p style="border-bottom: 1px solid #ebebeb;" v-for="(item,index) in list" :key="index">· {{ item }}</p>
        </div>
    </div>
  </template>
  
  <script>
  export default {
      name:'Memory',
      data(){
          return{
              list:[],
              total:0
          }
      },
      mounted(){
          this.init();
      },
      methods:{
      init(){
          let str = `HNNTH:/ $ cat /proc/meminfo
MemTotal:        7615308 kB
MemFree:          422488 kB
MemAvailable:    1840400 kB
Buffers:            2368 kB
Cached:          1635424 kB
SwapCached:        25768 kB
Active:          1640004 kB
Inactive:        2225820 kB
Active(anon):    1055380 kB
Inactive(anon):  1233720 kB
Active(file):     584624 kB
Inactive(file):   992100 kB
Unevictable:       26744 kB
Mlocked:           26308 kB
SwapTotal:       5684596 kB
SwapFree:        2465820 kB
Dirty:               108 kB
Writeback:             0 kB
AnonPages:       2245496 kB
Mapped:           472644 kB
Shmem:             37316 kB
KReclaimable:     333068 kB
Slab:             650272 kB
SReclaimable:     192324 kB
SUnreclaim:       457948 kB
KernelStack:       79168 kB
PageTables:       200056 kB
NFS_Unstable:          0 kB
Bounce:                0 kB
WritebackTmp:          0 kB
CommitLimit:     9492248 kB
Committed_AS:   195185216 kB
VmallocTotal:   262930368 kB
VmallocUsed:      184416 kB
VmallocChunk:          0 kB
Percpu:            16896 kB
CmaTotal:         438272 kB
CmaFree:             180 kB
IonTotalCache:     63176 kB
IonTotalUsed:     642684 kB
EswapTotal:      2097152 kB
EswapUsed:        204064 kB
EswapStored:      181336 kB
Protected:        183888 kB
`
          let arr = str.split("\n");
          this.list = arr;
          this.total = arr.length;
      }
  
      }
  
  }
  </script>
  
  <style scoped>
      .headerBoxList {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #d2d2d2;
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
    }
    .content{
      height: 80vh;
      overflow-y: auto;
      padding-left:50px;
      margin-top: 20px;
  }
    @media screen and (min-width: 2360px) {
      .content{
      height:67vh;
      overflow-y: auto;
  
    }
    }
  </style>